<template>
  <a-layout style="min-height: 100vh">
    <use-menu :isPackUp="isPackUp"></use-menu>
    <a-layout>
      <use-header v-model:isPackUp="isPackUp"></use-header>
      <div class="h-full w-full dark:bg-black overflow-y-scroll box">
        <router-view v-slot="{ Component }">
          <transition name="slide">
            <keep-alive v-if="route.meta.isCache">
              <component :is="Component" />
            </keep-alive>
            <component :is="Component" v-else />
          </transition>
        </router-view>
      </div>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
  import UseMenu from './menu/index.vue';
  import UseHeader from './header/index.vue';

  const route = useRoute();
  let isPackUp = ref(false);
  if (sessionStorage.getItem('isPackUp') === 'true') {
    isPackUp.value = true;
  }
</script>

<style scoped>
  :deep(.anticon) {
    vertical-align: 2px !important;
  }

  @-webkit-keyframes slide-out-right {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(100px);
      transform: translateX(100px);
      opacity: 0;
    }
  }
  @keyframes slide-out-right {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(100px);
      transform: translateX(100px);
      opacity: 0;
    }
  }
  @-webkit-keyframes slide-in-left {
    0% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-left {
    0% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  .slide-enter,
  .slide-leave-to {
    -webkit-animation: slide-out-right 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    animation: slide-out-right 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  }
  .slide-enter-to,
  .slide-leave {
    -webkit-animation: slide-in-left 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both 0.32s;
    animation: slide-in-left 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both 0.32s;
  }

  :deep(.ant-layout) {
    @apply overflow-hidden relative;
  }
  .box {
    @apply absolute top-[80px] overflow-hidden;
  }
  .box > main {
    @apply overflow-scroll w-full;
    height: 93vh;
  }
  .box > main::-webkit-scrollbar {
    width: 0;
  }

  /* .box > :deep(main::-webkit-scrollbar) {
    @apply w-0;
  } */
</style>
